<template>
  <div>
    <div class="header">
      <van-nav-bar
        title="答案"
        style="background: #fff;"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="answer_swiper" v-for="(item,i) in issue_list" :key="i">

    	<p class="p_content_item p_content_pcont">
    		{{i+1}}.{{item.issue_content}}
    	</p>

    	<p
      		style="margin-bottom: 5vh;margin-top: 3vh;"
      	  v-for="(answer,i) in item.answers"
          :name="answer.a_id"
          :key="i">
      			<input
      				disabled="disabled"
      				id="color-input-orange"
      				class="Iput_check_box chat-button-location-radio-input"
      				name="color-input-red"
      				value="#f0544d"
      				:checked="item.answer_id | filterAa(answer.a_id)"
      				type="checkbox"/>
      				 <label for="color-input-orange"></label>
      	       <label style="font-size: 13px;">{{answer.answer_content}}</label>
      	  </p>


    <div class="footer_info" >
    	<p class="" v-if="item.answertype ==1">
    		<span class="ques_answer" style="margin-left: 0vw;font-size: 14px;">作答正确</span>
    		<span class="quan_answer" style="font-size: 14px;">
    			正确答案：{{item.right_a}}
    		</span>
    	</p>
      <p class="" v-if="item.answertype ==2">
        <span class="ques_answer" style="margin-left: 0vw;font-size: 14px;color:red">作答错误</span>
        <span class="quan_answer" style="font-size: 14px;">
    			正确答案：{{item.right_a}}
    		</span>
      </p>
      <p class="" v-if="item.answer_id ==null">
        <span class="ques_answer" style="margin-left: 0vw;font-size: 14px;color:red">未作答</span>
        <span class="quan_answer" style="font-size: 14px;">
    			正确答案：{{item.right_a}}
    		</span>
      </p>



    </div>

    </div>

  </div>





</template>
<script>
     export default {
        data(){
        	return{
              result:[0],
              educationId:'',
              userId:'',
              checked:true,
              issue_list:[],
        	}

        },
         mounted:function(){


             this.educationId=this.$route.query.educationId;
             this.userId=this.$route.query.userId;

             this.get_obj_data();
         },
         filters:{
             filterAa(answer_id,a_id){
                if(answer_id == null){
                    return false;
                }
                if(answer_id.indexOf(a_id) >= 0){
                    return true;
                }else{
                    return false;
                }
             }


         },
        methods: {
            onClickLeft() {
                this.$router.push({
                    path:'/Polulartion'
                })
            },

            get_obj_data(){
                const that = this;
                let param = "educationId="+that.educationId+"&userId="+that.userId;
                that.$sendRequest('/education/issue_list',param).then(function(res){
                    console.log(res.data);

                    if(res.data.code ==0){
                        for(var i = 0;i<res.data.result.issue_list.length;i++){
                            let right_aws_arr=[];
                            for(var j = 0;j<res.data.result.issue_list[i].answers.length;j++){
                              if(res.data.result.issue_list[i].answers[j].type==1){
                                  var v = parseInt(j)+1;
                                  right_aws_arr.push("答案"+v);
                              }
                            }
                            res.data.result.issue_list[i].right_a = right_aws_arr.toString();


                            that.issue_list.push(res.data.result.issue_list[i])
                        }
                        console.log(that.issue_list);


                    }else if(res.data.code ==2){

                    }

                })
            }
        }


     }
</script>

<style scoped="scoped">
	input[type=checkbox]{
	visibility: hidden;
}

#color-input-orange +label{
    display: inline-block;
    width: 15px;
    height: 15px;
    cursor: pointer;

    top: 1px;
    left: 15px;
    border:1px solid #4C9FFD;
    border-radius: 2px;

}

#color-input-orange:checked +label::before{
    display: block;
    content: "\2714";
    text-align: center;
    font-size: 13px;
    color: #4C9FFD;
}


  .answer_swiper >>> .van-checkbox{
    width: 100%;
  }

  .answer_swiper >>> .van-checkbox-group{
    padding: 2vh;
  }
  .answer_swiper >>> .van-checkbox__icon{
    display: inline-block !important;
  }
  .answer_swiper >>> .van-checkbox{
    margin-top: 2vh;
    margin-bottom: 2vh;
  }
	.p_content_pcont >>> .van-checkbox{
		border:1px solid #4C9FFDFF;
		border-radius: 50%;
		font-size: 16px;
	}
	.p_content_pcont >>> .van-checkbox__icon{
		font-size: 16px;
	}
	.p_content_pcont span{
		width: 89%;
		vertical-align: top !important;
		margin-left: 2vw;
	}
	.footer_info{
		text-align: center;
		line-height: 6vh;
	}
	.footer_info >>>.van-icon{
		vertical-align: middle;
		color:#4C9FFDFF ;
	}
	.footer_info .pcolor_content >>> .van-icon{
		vertical-align: middle;
		color: #FF4242;
	}
	.answer_swiper>>>.van-checkbox{
		    display: inline-block;
        vertical-align: middle;
	}
	.answer_swiper span{
		display: inline-block;
    vertical-align: middle;
   /* margin-left: 3vw;*/
	}
	.p_content_item{
		vertical-align: middle;
    width: 81%;
    display: inline-block;
    padding-top: 1vh;
    font-size: 14px;

	}
	.answer_swiper{
		text-align: left;
		padding: 2vh;
	}
	.anser_item_page{
		    position: absolute;
		    margin: 0;
		    padding: 0;
		    left: 40%;
		    color: #fff;
		    top:12%;
	}
	p{
		margin: 0;
		padding: 0;
	}
	.Img_content{
		width: 42vh;
    margin-top: 4vh;
	}
	.ques_answer{
		margin-right: 7vw;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(76,159,253,1);
	}
	.quan_answer{
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1)
	}
	.p_content_pcontent >>> .van-button--normal{
		padding: 0px 45px;
	}
  .header >>> .van-icon-arrow-left{
    color: #2c3e50;
  }
	/*.p_content_pcont{
		display: flex;
		justify-content: flex-start;

	}*/

	/*.p_content_pcont>>> .van-checkbox{
		width: 8vw;
	}*/
</style>
